<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
	<title>Recipese</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
	
	<!-- See http://blog.jqueryui.com/2011/02/jquery-ui-1-8-10/ for more jquery ui theme links  -->
	<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" type="text/css" rel="stylesheet" />
	
	<link href="/css/styles.css" type="text/css" rel="stylesheet" />
	
	<script type="text/javascript">
	$(document).ready(function(){		
		$('[name="delete_"]').click(function(e){
			var frm = this.form;
			$('#delete-modal').dialog({
					resizable: false,
					modal: true,
					closeOnEscape: false,
					open: function(event, ui) { $('.ui-dialog-titlebar-close').hide(); },
					buttons: {
						"Yes": function() {
							$(this).dialog("close");
							// ugly work around for named submit buttons
							$(frm).append('<input type="hidden" name="delete" value="Delete"/>');
							frm.submit();
						},
						"No": function() {
							$(this).dialog("close");
						}
					}
				});
			});

		$("input:submit, input:button, button").button();
	});
	
	</script>
	
</head>
<body>
	<div id="delete-modal" title="Delete Recipe" style="display:none;">
		<p>Are you sure you want to delete this recipe?</p>
	</div>
	<div id="center-section">
		<div id="header">
			<img src="/images/recipese-logo.png" alt="logo" />
			<span style="float:right;"><a href="/mvc/recipes">Add a Recipe</a> | <a href="${authUrl}">Logout</a></span>
		</div>
		<div>
			Click <a href="/chrome-extension.crx">here</a> to get the Google Chrome Extension for Recipese.
		</div>
	    <div id="content">
	    	<div>
	    	<form:form modelAttribute="recipe">
	    		<form:errors cssClass="global-errors" />
	    	</form:form>
	    	</div>
	    		    
			<h3>Your Recipes</h3>
			<div>
				<table style="width: 100%;">
					<c:forEach var="recipe" items="${recipes}" varStatus="status">
						<tr class="detail-row-${status.index % 2 == 0 ? 'even' : 'odd'}">
							<td>
								<a href="/mvc/recipes?id=<c:out value="${recipe.id}" />">
									<c:out value="${recipe.name}"/>
								</a>
							</td>
							<td style="width:5%">
								<form:form method="POST" action="/mvc/recipes">
									<input type="hidden" name="id" value="<c:out value="${recipe.id}"/>" />
									<input type="submit" name="edit" value="Edit" />
								</form:form>
							</td>
							<td style="width:5%">
								<form:form method="POST">
									<input type="hidden" name="id" value="<c:out value="${recipe.id}"/>" />
									<input type="button" name="delete_" value="Delete" />
								</form:form>
							</td>
						</tr>
					</c:forEach>
				</table>
			</div>
				
			<h3>Recipes Shared With You</h3>
			<div>		
				<table style="width: 100%;">
					<c:forEach var="shareRecipe" items="${sharedRecipes}" varStatus="status">
						<tr class="detail-row-${status.index % 2 == 0 ? 'even' : 'odd'}">
							<td>
								<a href="/mvc/recipes?id=<c:out value="${shareRecipe.recipeId}" />">
								<c:out value="${shareRecipe.recipe.name}"/>
								</a>
							</td>
							<td>
								<c:if test="${shareRecipe.collaborative}">
									<form:form method="POST" action="/mvc/recipes">
										<input type="hidden" name="id" value="<c:out value="${shareRecipe.recipeId}"/>" />
										<input type="submit" name="edit" value="Edit" />
									</form:form>
								</c:if>&nbsp;
							</td>
						</tr>
					</c:forEach>
				</table>
			</div>
	</div>
</div>


</body>
</html>